<template>
  <div>
    <el-form ref="form" :model="form" inline :span="16">
      <el-col :span="16">
        <p class='p_hr'>设置有效时间</p>
      </el-col>
      <el-col :span="16">
        <el-col :span="10">
          <el-form-item label="生效时间">
          </el-form-item>
          <el-button type="primary" @click='addRow'>添加时间段</el-button>
        </el-col>
        <el-col :span="16" v-for="(item, $index) in timeList">
          <el-form-item>
            <el-date-picker @change=updateTimeList v-model="item.time" type="datetimerange" placeholder="选择时间范围">
            </el-date-picker>
            <el-button @click.prevent="delRow($index)">删除</el-button>
          </el-form-item>
        </el-col>
      </el-col>
    </el-form>
    </el-col>
  </div>
</template>

<script>
export default {
  data () {
    return {
      param: {},
      timeList: [{
        'time': '',
        'startTime': '',
        'endTime': ''
      }]
    }
  },
  created () {

  },
  methods: {
    addRow () {
      this.timeList.push({
        'startTime': '',
        'endTime': '',
        'time': ''
      })
    },
    delRow (index) {
      this.timeList.splice(index, 1)
    },
    updateTimeList () {
      let that = this
      this.timeList.map(function (item, index) {
        if (item.time) {
          item.time.map(function (item2) {
            item.startTime = +new Date(item2)
            item.endTime = +new Date(item2)
          })
        } else {
          that.timeList.splice(index, 1)
        }
      })
      this.$emit('getTimeList', this.timeList)
    }
  }
}
</script>

